<template>
    <div id="question">
        <van-tabs v-model="active" swipeable:true @click="checkTab" color="#5499ef" :animated=true swipeable=true>
        <van-tab v-for="index in classList" :key="index">
            <template #title>
            <van-icon :name="index.icon" />{{index.title}}
            </template>
        </van-tab>
        </van-tabs>
        <div class="body" :style="`height:${height}`" v-show="selectTable">
            <div>
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                >
                <ul v-for="data in dataList" :key="data.id" style="margin-top:.1rem">
                <van-card
                    @click="openDetail(data.id)"
                    >
                    <template #desc>
                        <div v-if="data.petReplyModel!=null">
                        <p style="display:flex">
                         <van-image :src="`https://pett.oss-cn-beijing.aliyuncs.com/${data.petReplyModel.userImage}`" height="30" width="30" round/>
                        <span style="margin-top: .3rem;margin-left: .6rem;">{{data.petReplyModel.userName}}</span>
                        </p>
                        <div style="display:flex">
                            <span style="color: rgb(156, 148, 148);font-size: 12px;">{{data.petReplyModel.rpItem}}</span>
                            <span style="margin-top:-2rem;margin-left: .2rem;">
                            <van-image :src="data.img" height="80" width="100" radius="10" v-if="data.img==''||data.img==undefined?false:true"/>
                            </span>
                        </div>
                        </div>
                    </template>
                     <template #title>
                        <span style="font-size: 16px;font-weight: bold;">{{data.title}}</span>
                    </template>
                    <template #num>
                        <span>回答次数：{{data.num}} 次</span>
                    </template>
                </van-card>
                </ul>
                </van-list>
            </div>

        </div>

        <van-icon name="question" size="50px" class="right_bottom" color="#5499ef" @click="addQuestion"/>
       <van-popup
        v-model="isShowInput"
        closeable
        close-icon="close"
        position="bottom"
        :style="{ height: '50%' }"
        >
        <div style="margin-top:3rem">
        <van-field
            v-model="message"
            rows="3"
            autosize
            maxlength="50"
            type="textarea"
            placeholder="请输入问题"
            :show-word-limit=true
            >
             <template #button>
                <van-button size="small" type="primary" @click="submit">提交</van-button>
            </template>
        </van-field>
        <span style="margin-left:.3rem">
            <van-uploader :after-read="afterRead" v-model="imgList" max-count="6" upload-text="描述图片"/>
        </span>
        </div>
       </van-popup>
    </div>
</template>
<script>
import {getRequestionList,submitRequestion} from '../../../request/mobile/home/request_home'
import {uploadPetImg} from '../../../request/mobile/mine/request_mine'
export default {
    data(){
        return{
            active:'1',
            classList:[{title:'宠物问答',id:1,icon:""},{title:'大咖直播',id:2,icon:''}],
            height:'',
            dataList:[],
            loading:false,
            finished:false,
            pageStart:0,
            pageEnd:30,
            qtType:1,
            selectTable:true,
            isShowInput:false,
            message:'',
            imgList:[],
            userId:localStorage.getItem("userId"),
            imgUrlList:''
        }
    },
    methods:{
        getHeight(){
            this.height = window.innerHeight-44+"px";
        },
        checkTab(event){
           console.log(event)
           if(event==1){
               this.selectTable=false;
           }else{
               this.selectTable=true
           }
        },
        openDetail(id){
            this.$router.push({path:'/questionDetail/'+id})
        },
        onLoad(){
                this.loading=true
                this.getRequestionList();
                this.loading=false;
        },
        getRequestionList(){
          getRequestionList({pageStart:this.pageStart,pageEnd:this.pageEnd,qtType:this.qtType}).then(res=>{
              if(res.code==200){
                  var datas = res.data;
                  if(datas.length==0){
                      this.finished=true;
                      return;
                  }
                  for(var index in datas){
                      var data = datas[index];
                      this.dataList.push({
                          id:data.qtId,
                          title:data.qtItem,
                          petReplyModel:data.petReplyModel,
                          num:data.replyCount
                      })
                  }
                   this.pageStart=this.pageEnd;
                    this.pageEnd+=this.pageEnd;
              }else{
                  this.$Toast("服务器异常")
              }
          })
        },
        addQuestion(){
            this.isShowInput=true;
        },
        afterRead(event){
            
            var base64Content = event.content;
            var fileContent = event.file;
            var formData = new FormData();
            formData.append("file",fileContent)
           // var baseUrl='https://pett.oss-cn-beijing.aliyuncs.com/';
             uploadPetImg(formData).then(res=>{
                if(res.code==200){
                   this.imgUrlList+="https://pett.oss-cn-beijing.aliyuncs.com/"+res.data+","
                    return;
                }
                this.$Toast(res.msg)
            })
        },
        submit(){
            this.imgUrlList = this.imgUrlList.substring(0,this.imgUrlList.length-1)
            submitRequestion({userId:this.userId,qtItem:this.message,qtImage:this.imgUrlList})
            .then(res=>{
                if(res.code==200){
                    this.isShowInput=false;
                    this.$Toast.success("提问成功");
                }else{
                    this.$Toast.fail("提问失败了")
                }
            })
        }
    },
    created(){
        this.getHeight()
    }
}
</script>
<style scoped>
.body{
    background:white;
    width: 100%;
    overflow-y:scroll;
}
.right_bottom{
right: 10px;
bottom: 10px;
overflow: hidden;
z-index: 9999;
position: fixed;
padding:5px;
text-align:center;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}

</style>